import React from 'react'
import { connect } from 'react-redux';
import { messages } from 'share/common'
import { message } from 'antd'
import SlideFrame from "components/slide-frame";
import EditContent from 'containers/approve/edit-content';
import approvingService from 'containers/approve/approving-edit.service'

class ApprovingEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editable: false, //审批中是否可编辑
      isResetData: false, //是否重置edit content中的数据
      isShowEdit: false, //slideFrame是否开启
      custFormValues: [], //单据详情上的custFormValues
      awaitToProcessValues: [] //待处理的custFormValues
    }
  }

  componentWillMount() {
    const { custFormValues } = this.props;
    if (custFormValues.length) {
      this.setState({custFormValues: JSON.parse(JSON.stringify(custFormValues))}, () => {
        this.initData();
      });
    }
  };

  componentWillReceiveProps(nextProps) {
    const { custFormValues } = this.state;
    if (!custFormValues.length && nextProps.custFormValues.length) {
      this.setState({custFormValues: JSON.parse(JSON.stringify(nextProps.custFormValues))}, () => {
        this.initData();
      });
    }
  };

  initData = () => {
    const { formOID, entityOID, entityType, approvalOID } = this.props;
    let params = {
      formOID,
      entityOID,
      entityType,
      approvalOID
    };
    let url = params.approvalOID ? 'getEditDTO' : 'getAuditDTO';
    !params.approvalOID && (delete params.approvalOID);
    approvingService[url](params).then(response => {
      if (response.data && response.data.editable) {
        this.setState({editable: true});
        this.processValues(response.data.customFormFields);
      }
    }).catch(e => {
      let error = e.response.data;
      if (error.validationErrors && error.validationErrors.length) {
        message.error(`${error.validationErrors[0].message}`);
      } else {
        message.error(`${error.message}`);
      }
    });
  };

  //根据customFields从custFormValues过滤出待操作的数据
  processValues = (customFields) => {
    const { custFormValues } = this.state;
    let awaitToProcessValues = [];
    customFields.map(field => {
      custFormValues.map(formValue => {
        if (field.fieldOID === formValue.fieldOID) {
          field.formValueOID = formValue.formValueOID;
          field.showValue = formValue.showValue;
          field.value = formValue.value;
        }
      });
      if (field.formValueOID) {
        awaitToProcessValues.push(field);
      }
    });
    this.setState({awaitToProcessValues});
  };

  goDetail = () => {
    this.setState({isShowEdit: true, isResetData: false});
  };

  isCallBack = (isChange) => {
    this.setState({isShowEdit: false, isResetData: true});
    if (isChange) {
      this.setState({custFormValues: []});
      this.props.handleAfterSave();
    }
  };

  render() {
    const { isShowEdit, editable, awaitToProcessValues, isResetData } = this.state;
    const { entityOID, entityType, approvalOID } = this.props;
    return (
      <div style={{display: 'inline-block'}}>
        {editable && (
          <span className='default-color-font' style={{fontWeight: 'normal', fontSize: '14px', marginLeft: '20px', cursor: 'pointer'}}
                onClick={this.goDetail}>
            {messages('common.edit'/*编辑*/)}
          </span>
        )}
        <SlideFrame show={isShowEdit}
                    title={messages('approve.key125')/*可编辑字段详情*/}
                    content={EditContent}
                    params={{awaitToProcessValues, entityOID, entityType, approvalOID, isResetData}}
                    onClose={() => this.setState({isShowEdit: false})}
                    afterClose={(isChange) => this.isCallBack(isChange)}
                    width="800px"/>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

ApprovingEdit.propTypes = {
  handleAfterSave: React.PropTypes.func, //审批中保存修改的字段的回调
  formOID: React.PropTypes.string,
  entityOID: React.PropTypes.string,
  entityType: React.PropTypes.number,
  approvalOID: React.PropTypes.string,
  custFormValues: React.PropTypes.array
};

ApprovingEdit.defaultProps = {
  handleAfterSave: () => {},
  formOID: '',
  entityOID: '',
  approvalOID: '',
  entityType: null,
  custFormValues: []
};

export default connect(mapStateToProps)(ApprovingEdit)
